/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import { Card, Row, Col, Input, TreeSelect, Button, Tree, Drawer, Divider, Radio, Checkbox } from 'antd';
import MyTable from '../../components/common/MyTable';
import PublicService from '../../services/PublicService';
import request from '../../utils/request';
const Search = Input.Search;
const CheckboxGroup = Checkbox.Group;
// const TreeNode = TreeSelect.TreeNode;
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import style from './Inspector.less';
const { TreeNode } = Tree;
const xc = require("../../assets/xc.png")
const blueCar = require("../../assets/blueCar.svg")
const gasCar = require("../../assets/gasCar.svg")
const orangeCar = require("../../assets/orangeCar.svg")
const xc3 = require("../../assets/xc3.png")
const xc2 = require("../../assets/xc2.png")
const xc1 = require("../../assets/xc1.png")
var infoWindow
const tup = require("../../assets/tup.png")

var map, infoWindow
class Inspector extends Component {

    constructor(props) {
        super(props)


        this.state = {
            type: "地图",
            visible: false,
            autoExpandParent: true,
            nameArr: [],
            centre: [114.304494, 30.593295],
            realTime: [],
            target: [],
            offLine: 0,
            park: 0,
            travel: 0,
            offLineNum: 0,
            parkNum: 0,
            travelNum: 0,
            treeData: [
                {
                    children: [
                        {
                            children: [
                                {
                                    children: [
                                        {
                                            pid: "#1燃气站",
                                            title: "张三",
                                            value: "张三"
                                        },
                                        {
                                            pid: "#1燃气站",
                                            title: "李四",
                                            value: "李四"
                                        }
                                    ],
                                    pid: "#1企业",
                                    title: "#1燃气站",
                                    value: "#1燃气站"
                                },
                                {
                                    children: [
                                        {
                                            pid: "#2燃气站",
                                            title: "王五",
                                            value: "王五"
                                        },
                                        {
                                            pid: "#2燃气站",
                                            title: "李四",
                                            value: "李四"
                                        }
                                    ],
                                    pid: "#1企业",
                                    title: "#2燃气站",
                                    value: "#2燃气站"
                                }
                            ],
                            pid: "全部",
                            title: "#1企业",
                            value: "#1企业"
                        },
                        {
                            children: [
                                {
                                    children: [
                                        {
                                            pid: "#3燃气站",
                                            title: "田七",
                                            value: "田七"
                                        },
                                        {
                                            pid: "#3燃气站",
                                            title: "王九",
                                            value: "王九"
                                        }
                                    ],
                                    pid: "#2企业",
                                    title: "#3燃气站",
                                    value: "#3燃气站"
                                }
                            ],
                            pid: "全部",
                            title: "#2企业",
                            value: "#2企业"
                        }
                    ],
                    pid: "0",
                    title: "全部",
                    value: "全部"
                }
            ],
            value: [],
            loading: false,
            dataSource: [],
            pageIndex: 1,
            pageSize: 10,
            columns: [
                {
                    title: '巡查员',
                    dataIndex: 'name',
                    width: '8%',
                    align: "center",
                },
                {
                    title: '巡查任务',
                    dataIndex: 'task',
                    width: '8%',
                    align: "center",

                },
                {
                    title: "任务类型",
                    dataIndex: 'taskType',
                    width: '8%',
                    align: "center",
                    render: (text) => <span>{text ? text : '/'}</span>
                },
                {
                    title: 'GPS状态',
                    width: '8%',
                    dataIndex: 'GPSType',
                    align: "center",
                },

                {
                    title: '上报时间',
                    dataIndex: 'time',
                    width: '15%',
                    align: "center",
                },
                {
                    title: '参考位置',
                    dataIndex: 'location',
                    width: '13%',
                    align: "center",
                },

            ],
            commercialTenant: 1,
            gasStation: 1

        }



    }

    componentDidMount() {

        this.save()
    }

    showDrawer = () => {
        this.setState({
            visible: true,
        });
    };

    onClose = () => {
        this.setState({
            visible: false,
        });
    };

    //切换地图视角
    onGroup = (e) => {
        console.log(this.state.dataSource, this, e.target.value)
        this.initThree(this.state.dataSource, e.target.value)
        this.setState({
            type: e.target.value
        })
    }





    initThree = (str, type) => {

        console.log(str, type)




        if (type === '三维') {
            console.log("jinru")
            map = new AMap.Map("container", {
                resizeEnable: true,
                pitch: 75, // 地图俯仰角度，有效范围 0 度- 83 度
                viewMode: '3D' // 地图模式

            });
        } else if (type === '卫星') {
            map = new AMap.Map("container", {
                layers: [new AMap.TileLayer.Satellite()]


            });


        } else {
            map = new AMap.Map("container", {
                resizeEnable: true,

            });
        }




        const html = {
            name: <div>123</div>
        }


        const xc1tu = "./img/xc1.png"
        const xc2tu = "./img/xc2.png"
        const xc3tu = "./img/xc3.png"
        infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
        for (var i = 0, marker; i < str.length; i++) {
            if (str[i].type == 1) {
                console.log(222)
                var marker = new AMap.Marker({
                    position: str[i].longitudeLatitude,
                    icon: xc1tu,
                    map: map
                });
            }
            if (str[i].type == 2) {
                var marker = new AMap.Marker({
                    position: str[i].longitudeLatitude,
                    icon: xc2tu,
                    width: 20,
                    height: 20,
                    map: map
                });
            }
            if (str[i].type == 3) {
                var marker = new AMap.Marker({
                    position: str[i].longitudeLatitude,
                    icon: xc3tu,
                    map: map
                });
            }

            marker.content = `<div>
            <p>燃气站点 : ${str[i].gasStationName}</p>
            <p>配送员 : ${str[i].name}</p>
            <p>车牌号 : ${str[i].plateNumber}</p>
            <p>GPS状态 : ${str[i].GPSType}</p>
            <p>速度 : ${str[i].speed}</p>
            </div>`
            marker.on('click', markerClick);
            marker.emit('click', { target: marker });
        }
        function markerClick(e) {
            infoWindow.setContent(e.target.content);
            infoWindow.open(map, e.target.getPosition());
        }
        map.setFitView();
    }



    save = (v) => {
        request({
            url: '/zhrq-web/gas/deliverystaff/getInspectorsName',
            method: 'POST',
            data: { name: v ? v : "" }
        }).then(data => {
            console.log(data)
            this.setState({
                treeData: data.ret.resultList
            })
            this.initThree()
        })
    }

    onChange = (value) => {
        console.log('onChange ', value);
        this.setState({ value });
    }

    onSave = () => {

        request({
            url: '/zhrq-web/gas/deliverystaff/getPatrolsDataByName',
            method: 'POST',
            data: {
                nameList: this.state.nameArr,
                commercialTenant: this.state.commercialTenant,
                gasStation: this.state.gasStation
            }
        }).then(data => {
            console.log(data)
            if (data.rc == 0) {
                let tableArr = []
                data.ret.patrolsList.forEach((item) => {
                    if (item.taskType) {
                        tableArr.push(item)
                    }
                })

                this.setState({
                    dataSource: tableArr,

                })

                setTimeout(() => {
                    this.initThree(data.ret.patrolsList, this.state.type)

                }, 500);
            }
        })


    }

    onCheck = (checkedKeys, v) => {
        console.log('onCheck', checkedKeys, v.checkedNodes);

        let arr = []
        v.checkedNodes.forEach((item) => {
            if (item.props.value) {
                arr.push(item.props.value)
            }
        })

        setTimeout(() => {

            this.setState({
                nameArr: arr
            })
        }, 500)


    }

    onSelect = (selectedKeys, info) => {
        console.log('onSelect', info);
        this.setState({ selectedKeys });
    }

    renderTreeNodes = data => data.map((item) => {
        if (item.children) {
            return (
                <TreeNode title={item.title} key={item.key} dataRef={item}>
                    {this.renderTreeNodes(item.children)}
                </TreeNode>
            );
        }
        return <TreeNode {...item} />;
    })


    onSearch = (v) => {
        console.log(v)
        this.save(v)
    }

    onCheckboxGroup = (v) => {
        if(v.length == 0) {
            this.setState({
                commercialTenant: 0,
                gasStation: 0
            })
            setTimeout(() => {
                this.onSave()
            },500)
            return
        }
        console.log(v)
        if (v.length == 2) {
            console.log(2)
            this.setState({
                commercialTenant: 1,
                gasStation: 1
            })
            setTimeout(() => {
                this.onSave()
            },500)
            return
        }
        if (v[0] == '供应站') {
            console.log('供应站')
            this.setState({
                gasStation: 1,
                commercialTenant: 0
            })
            setTimeout(() => {
                this.onSave()
            },500)
            return
        }

        if (v[0] == '商户') {
            console.log('商户')
            this.setState({
                gasStation: 0,
                commercialTenant: 1
            })
            setTimeout(() => {
                this.onSave()
            },500)
            return
        }

        

    }


    render() {
        const { loading, selectedRowKeys, dataSource, pageIndex, pageSize, treeData, autoExpandParent } = this.state
        const windowWidth = document.body.clientWidth;
        const columns = this.columns
        const height = document.body.clientHeight;
        let containerHeight = '60vh';
        if (windowWidth > 1367) {
            containerHeight = '74vh';
        }

        const options = [
            { label: '供应站', value: '供应站' },
            { label: '商户', value: '商户' },

        ];
        return (
            <div>


                <span onClick={this.showDrawer} style={{ cursor: "pointer", borderRadius: 5, width: 30, position: "fixed", zIndex: 999, right: 0, top: "30vh", backgroundColor: "#fff" }}>
                    展<br />
                    开
                </span>

                <Row>
                    <Col span={6}>
                        <Card className={style.left_box}
                            bodyStyle={{ padding: "6px 24px" }}
                        >
                            <Search
                                size="small"
                                placeholder="请输入"
                                onSearch={this.onSearch}
                                enterButton
                            />
                            <Tree
                                checkable
                                onCheck={this.onCheck}
                                // autoExpandParent={true}
                                defaultExpandedKeys={["0-0"]}
                            >
                                {this.renderTreeNodes(treeData)}
                            </Tree>
                            <Col style={{ textAlign: "center", position: "absolute", bottom: "10px", left: "50%", transform: "translateX(-50%)" }}><Button type="primary" style={{ width: 200 }} onClick={this.onSave}>查询</Button></Col>
                        </Card>
                    </Col>

                    <Col span={18}>
                        <div className={style.carstr}>
                            <div className={style.TTop_box}>
                                <Radio.Group defaultValue="地图" buttonStyle="solid" size="small" onChange={this.onGroup}>
                                    <Radio.Button value="地图" size="small">地图</Radio.Button>
                                    <Radio.Button value="卫星" size="small">卫星</Radio.Button>
                                    <Radio.Button value="三维" size="small">三维</Radio.Button>
                                </Radio.Group>

                            </div>

                            <div className={style.TLop_box}>
                                <CheckboxGroup defaultValue={["供应站", "商户"]} options={options} onChange={this.onCheckboxGroup} />

                            </div>
                            <Card className={style.Top_box}
                                bodyStyle={{ padding: "3px 24px" }}
                            >
                                巡查人员 : <img src={require('../../assets/ry.svg')} style={{ verticalAlign: "sub" }} style={{ width: 20, height: 20 }} /> <Divider type="vertical" /> 供应站点 : <img src={require('../../assets/zd.svg')} style={{ verticalAlign: "sub" }} style={{ width: 20, height: 20 }} /> <Divider type="vertical" /> 商户 : <img src={require('../../assets/sh.svg')} style={{ verticalAlign: "sub" }} style={{ width: 20, height: 20 }} />

                            </Card>
                        </div>
                        <Card className={style.right_Tbox}
                            id="container"
                            bodyStyle={{ padding: "6px 24px" }}
                        >
                            <Drawer
                                title="总览信息"
                                placement="right"
                                width={400}
                                // mask={false}
                                maskStyle={{ backgroundColor: "#f3f3f400" }}
                                closable={false}

                                onClose={this.onClose}
                                // getContainer={() => document.getElementById("container")}
                                visible={this.state.visible}
                            >
                                <img src={tup} style={{ width: "100%" }} />
                            </Drawer>
                        </Card>
                        <Card className={style.right_Bbox}
                            bodyStyle={{ padding: "6px 24px" }}
                        >

                            {/* <Row>
                                <Col span={4}><img src={blueCar} style={{ display: "inline-block", width: "16px", verticalAlign: "sub" }} />行驶在线 : {this.state.travelNum}({this.state.travel}%)</Col>
                                <Col span={4}><img src={orangeCar} style={{ display: "inline-block", width: "16px", verticalAlign: "sub" }} />停车在线 : {this.state.parkNum}({this.state.park}%)</Col>
                                <Col span={4}><img src={gasCar} style={{ display: "inline-block", width: "16px", verticalAlign: "sub" }} />离线 : {this.state.offLineNum}({this.state.offLine}%)</Col>
                            </Row> */}
                            <MyTable
                                // bordered
                                loading={loading}
                                columns={this.state.columns}
                                // rowSelection={rowSelection}
                                pagination={false}
                                // scroll={{ y: windowWidth < 1400 ? height - 280 : height - 300 }}
                                dataSource={PublicService.transformArrayData(dataSource, true, true, pageIndex, pageSize)}
                            />

                        </Card>
                    </Col>
                </Row>
            </div>
        )
    }
}
export default (Inspector);
